<template>
  <div class="content">
    <div class="header">
      <h3 class="title">{{ contentConfig?.header?.title ?? '数据列表' }}</h3>
      <el-button type="primary" @click="handleAdd">{{
        contentConfig?.header?.btnText ?? '新建数据'
      }}</el-button>
    </div>
    <div class="table">
      <el-table
        :data="pageList"
        style="width: 100%"
        border
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <template v-for="item in contentConfig.propsList" :key="item.name">
          <template v-if="item.type === 'timer'">
            <el-table-column v-bind="item">
              <template #default="scope">
                {{ formatUTC(scope.row[item.prop]) }}
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'handle'">
            <el-table-column fixed="right" :label="item.label" align="center">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  icon="Edit"
                  size="small"
                  text
                  @click.prevent="editRow(row)"
                >
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  icon="Delete"
                  size="small"
                  text
                  @click.prevent="delRow(row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'custom'">
            <el-table-column fixed="right" :label="item.label" align="center">
              <template #default="scope">
                <slot :name="item.slotName" v-bind="scope" :prop="item.prop"></slot>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column align="center" v-bind="item"></el-table-column>
          </template>
        </template>
        <!-- <el-table-column prop="updateAt" label="更新时间" align="center">
          <template #default="scope">
            {{ formatUTC(scope.row.updateAt) }}
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页 -->
      <div class="footer">
        <el-pagination
          v-model:current-page="currentPage"
          background
          layout="prev, pager, next,total,sizes"
          :page-sizes="[5, 10, 15, 20]"
          :total="pageTotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 新增弹窗 -->
    <addModal ref="addModalRef" :modal-config="modalConfig" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { formatUTC } from '@/utils/format'
import { storeToRefs } from 'pinia'
import useSystemStore from '@/store/main/system/system'
import addModal from '@/views/main/system/department/c-cpns/page-model.vue'
// 后期换成各个modal的config配置的值，暂定为写死的
import modalConfig from '@/views/main/system/department/config/modal.config'
import { ElMessage } from 'element-plus'
// import contentConfig from '@/views/main/system/role/config/content.config'
interface IProps {
  contentConfig: {
    pageName: string
    header?: {
      title?: string
      btnText?: string
    }
    propsList: any[]
  }
}
const props = defineProps<IProps>()
// 调用pinia中获取表格数据的接口
const systemStore = useSystemStore()
const currentPage = ref(1)
const pageSize = ref(10)
// 此时tabledata没有数据 是因为接口时异步获取的，而下面的tabledata是同步执行的
// 当执行到tabledata时，还没有数据，因为接口请求还没发起

// 拿到表格数据
const { pageList, pageTotalCount } = storeToRefs(systemStore)
// 页码相关逻辑

function handleSizeChange() {
  fetchPageListData()
}
function handleCurrentChange() {
  fetchPageListData()
}
const addModalRef = ref<InstanceType<typeof addModal>>()
// 新建数据
function handleAdd() {
  addModalRef.value?.open(false)
  // emit('newClick')
}
// 编辑
const editRow = (row: any) => {
  addModalRef.value?.open(true, row)
}
// 删除
const delRow = async (row: any) => {
  const id = row.id
  systemStore.deletePageListAction(props.contentConfig.pageName, id)
  ElMessage({
    message: '删除成功',
    type: 'success'
  })
  fetchPageListData()
}
fetchPageListData() // 发起请求
// 定义一个函数专门发起网络请求
function fetchPageListData(formData: any = {}) {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  const info = { size, offset }
  console.log(props.contentConfig.pageName)

  systemStore.postPageListAction(props.contentConfig.pageName, { ...info, ...formData })
}
defineExpose({ fetchPageListData })
</script>

<style lang="less" scoped>
.content {
  padding: 15px;
  margin-top: 20px;
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
  .title {
    font-size: 20px;
    font-weight: bold;
  }
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.el-button {
  margin-left: 0;
}
</style>
